<template>
  <div class="home">
    <!-- 轮播图 -->
    <van-swipe :autoplay="2000" lazy-render indicator-color="#ac42f3">
      <van-swipe-item
        v-for="image in [homeData.image1, homeData.image2]"
        :key="image"
      >
        <img :src="image" :style="{ width: '100%', height: '100%' }" />
      </van-swipe-item>
    </van-swipe>

    <!-- 分类 -->
    <van-grid :gutter="10">
      <van-grid-item
        icon="fire"
        text="热门好课"
        icon-color="#ff6262"
        to="/home/hotCourses"
      />
      <van-grid-item
        icon="bookmark"
        text="免费专区"
        icon-color="#28d094"
        to="/home/free"
      />
      <van-grid-item
        icon="cart"
        text="限时优惠"
        icon-color="#1e9ff2"
        to="/home/discount"
      />
      <van-grid-item
        icon="star"
        text="精品课程"
        icon-color="#ffc71c"
        to="/home/excelCourses"
      />
      <!-- <van-grid-item icon="star" text="精品课程" icon-color="#ffc71c" /> -->
    </van-grid>

    <!-- 限时优惠 -->
    <div class="AI"></div>
    <van-nav-bar
      title="限时优惠"
      right-text="全部"
      @click-right="jumpToDiscount"
    />
    <div class="discount" @click="toEec">
      <div
        class="card"
        v-for="discount in limitedDataList"
        :key="discount.id"
        @click="jumpToCourseDetail"
      >
        <img :src="discount.image" alt="" />
        <p>{{ discount.title }}</p>
        <span class="orange">￥{{ discount.price }}</span>
        <span class="line">￥{{ discount.originPrice }}</span>
        <button>{{ discount.rob }}</button>
      </div>
    </div>
  </div>

  <!-- 精选好文 -->
  <div class="AI"></div>
  <van-nav-bar
    title="精选好文"
    right-text="全部"
    @click-right="jumpToArticle"
  />
  <div class="article">
    <div
      class="article_card"
      v-for="article in goodArticlesDataList"
      :key="article.id"
      @click="jumpToArticleDetail"
    >
      <img :src="article.image" alt="" />
      <p>{{ article.title }}</p>
      <span class="author">{{ article.author }}</span>
    </div>
  </div>
  <!-- </div> -->

  <!-- 人工智能 -->
  <div class="AI"></div>
  <van-config-provider :theme-vars="themeVars">
    <van-nav-bar title="人工智能" right-text="全部" @click-right="jumpToFnvv" />

    <van-card
      v-for="item in homeData.list"
      :key="item.id"
      :price="formatMoney(item.price)"
      :title="item.title"
      :thumb="homeData.image3"
      :origin-price="299"
      @click="toai"
    >
      <template #num>
        <span> {{ item.num }} 人正在学习</span>
      </template>

      <template #tags>
        <van-tag plain type="danger" style="margin-top: 2vh">限时优惠</van-tag>
      </template>
    </van-card>
  </van-config-provider>

  <div class="AI"></div>
  <!-- UI设计 -->
  <van-config-provider :theme-vars="themeVars">
    <van-nav-bar title="UI设计" right-text="全部" @click-right="jumpToFnvv" />
    <van-card
      v-for="item in homeData.list"
      :key="item.id"
      :price="formatMoney(item.price)"
      :title="item.title"
      :thumb="homeData.image4"
      :origin-price="399"
      @click="toai"
    >
      <template #num>
        <span> {{ item.num }} 人正在学习</span>
      </template>

      <template #tags>
        <van-tag plain type="danger" style="margin-top: 2vh">限时优惠</van-tag>
      </template>
    </van-card>
  </van-config-provider>

  <div class="AI"></div>
  <!-- 产品设计 -->
  <van-config-provider :theme-vars="themeVars">
    <van-nav-bar title="产品设计" right-text="全部" @click-right="jumpToFnvv" />
    <van-card
      v-for="item in homeData.list"
      :key="item.id"
      :price="formatMoney(item.price)"
      :title="item.title"
      :thumb="homeData.image5"
      :origin-price="399"
      @click="toai"
    >
      <template #num>
        <span> {{ item.num }} 人正在学习</span>
      </template>

      <template #tags>
        <van-tag plain type="danger" style="margin-top: 2vh">限时优惠</van-tag>
      </template>
    </van-card>
  </van-config-provider>

  <!-- 调整感兴趣分类按钮 -->
  <div style="margin-top: 3vh; text-align: center">
    <van-button
      plain
      type="success"
      color="red"
      round
      icon-position="left"
      to="/select"
    >
      调整感兴趣分类
    </van-button>
  </div>
  <div class="whiteBox"></div>
  <!-- </div> -->
</template>

<script>
import axios from 'axios'
export default {
  name: '',
  data() {
    return {
      limitedDataList: [],
      goodArticlesDataList: [],
      homeData: {},
      active: 0,
      themeVars: {
        cardThumbSize: '18vh',
        carTextSize: '2vh',
        cardPriceColor: '#ffc71c',
        cardTitleFontSize: '2vh',
        cardBackgroundColor: '#fff',
        navBarTitleFontWeight: 'bolder',
      },
    }
  },
  created() {
    axios
      .get('/mock/api/home/list')
      .then((mockData) => {
        this.homeData = mockData.data.data
        console.log(this.homeData)
      })
      .catch(console.error)
    axios
      .get('/mock/api/home/limitedDataList')
      .then((mockData) => {
        this.limitedDataList = mockData.data.limitedData.list
      })
      .catch(console.error)
    axios
      .get('/mock/api/home/goodArticlesDataList')
      .then((mockData) => {
        this.goodArticlesDataList = mockData.data.goodArticlesData.list
      })
      .catch(console.error)
  },

  methods: {
    formatMoney(val) {
      return Number(val).toFixed(1)
    },
    jumpToCourseDetail() {
      this.$router.push({
        // path:'/search/relevant'
      })
    },
    jumpToArticleDetail() {
      this.$router.push({
        path: '/details',
      })
    },
    jumpToArticle() {
      this.$router.push({
        path: '/article',
      })
    },
    jumpToDiscount() {
      this.$router.push({
        path: '/home/discount',
      })
    },
    jumpToFnvv() {
      this.$router.push({
        path: '/fnvv',
      })
    },
    toEec() {
      this.$router.push('/xqy')
    },
    toai() {
      this.$router.push('/paydetail')
    },
  },
}
</script>

<style scoped>
.AI {
  width: 100%;
  height: 2vh;
  background: #f2f2f2;
}

.whiteBox {
  height: 10vh;
  background: #fff;
}

:deep(.van-card__title) {
  font-size: 14px;
  font-weight: bolder;
}

/* 加粗模块标题 */
:deep(.van-nav-bar__title) {
  font-weight: bolder;
}

/* 限时优惠 */
.discount {
  width: 96%;
  height: 28vh;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  margin-bottom: 3vh;
}

.discount .card {
  height: 100%;
  width: 32%;
  box-shadow: 0.1vh 0.3vh 1vh rgb(235, 231, 231);
  border-radius: 0.8vh 0.8vh 0 0;
}

.discount .card img {
  width: 100%;
  height: 12vh;
}

.discount .card p {
  font-size: 1.6vh;
  margin-bottom: 1vh;
  margin-left: 0.5vh;
}

.discount .card .orange {
  color: orange;
  font-weight: 600;
  font-size: 2vh;
}

.discount .card .line {
  font-size: 2vh;
  color: #ccc;
  text-decoration: line-through;
  margin-left: 10px;
}

.discount .card button {
  display: block;
  width: 10vh;
  height: 3vh;
  margin: 0 auto;
  margin-top: 10px;
  background-color: orange;
  border: none;
  border-radius: 1vh;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

/* 精选好文 */
.article {
  width: 96%;
  height: 24vh;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  margin-bottom: 3vh;
}

.article .article_card {
  height: 100%;
  width: 30%;
  box-shadow: 0.1vh 0.3vh 1vh rgb(235, 231, 231);
  border-radius: 0.8vh 0.8vh 0 0;
}

.article .article_card img {
  width: 100%;
  height: 12vh;
  border-radius: 0.8vh 0.8vh 0 0;
}

.article .article_card p {
  font-size: 1.6vh;
  margin-bottom: 1vh;
  margin-left: 0.5vh;
}

.article .article_card .author {
  font-size: 1vh;
  color: #888;
}
</style>
